<template>
  <dw-menu-datagrid-form
    ref="templateSetGridRef"
    :init-loaded="false"
    :columns="columns"
    v-model:activeFormData="formData"
    :before-save="beforeSave"
    :data-grid-title="dataGridTitle"
    :render-form-title="renderFormTitle"
    :get-page-http-config="getPageHttpConfig"
    :del-info-http-config="delInfoHttpConfig"
    :del-list-http-config="delListHttpConfig"
    :get-info-http-config="getInfoHttpConfig"
    :add-info-http-config="addInfoHttpConfig"
    :update-info-http-config="updateInfoHttpConfig"
  >
    <template #formSlot>
      <table class="dw-form-table">
        <tbody>
          <tr>
            <td class="dw-td-label"><span class="required">模板集名称</span></td>
            <td>
              <el-form-item
                prop="setName"
                :rules="[
                  {
                    required: true,
                    message: '请填写模板集名称!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.setName" placeholder="请输入模板集名称..."></el-input>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span>模板分类</span></td>
            <td>
              <el-input v-model="formData.categoryId" placeholder="请选择模板集分类..."></el-input>
            </td>
          </tr>
        </tbody>
      </table>
      <DragCol ref="dragColRef" height="calc(100% - 44px)" width="100%" :leftPercent="20" :sliderWidth="8" sliderBgColor="#e6ecf5" sliderBgHoverColor="#e6ecf5">
        <template #left>
          <dw-tree ref="fileTreeRef" data-form="local" :show-search="false" :treeProps="treeProps" @currentChange="currentNodeChange">
            <template #edit-contanier="{ node, data }">
              <el-select size="small" style="width: 49%" v-model="data['type']" :show-arrow="false" :clearable="true" :offset="2" placeholder="类型">
                <el-option label="文件夹" :value="2" />
                <el-option label="文件" :value="1" />
              </el-select>
              <el-input size="small" style="width: 50%" v-model="data['fileName']" placeholder="名称"></el-input>
            </template>
            <template #icon="{ data }">
              <el-icon v-if="data['type'] === 2"><Folder /></el-icon>
              <el-icon v-else><Document /></el-icon>
            </template>
          </dw-tree>
        </template>
        <template #right>
          <template-file-tabs></template-file-tabs>
        </template>
      </DragCol>
    </template>
  </dw-menu-datagrid-form>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import type { ITemplateFile, ITemplateSet } from '../template-set';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import { DragCol } from '@/components/vue-resizer';
import { nanoid } from 'nanoid';
import TemplateFileTabs from './template-file-tabs.vue';

defineOptions({
  name: 'TemplateSetFormGrid',
});

const templateSetGridRef = ref();
const fileTreeRef = ref();
const dataGridTitle = '模板集列表';
const formData = ref<ITemplateSet>({
  id: '',
  categoryId: '',
  categoryName: '',
  setName: '',
  setMemo: '',
  sortNo: 1,
  templateFileTree: [],
});

const treeData = ref([
  {
    id: '1',
    categoryName: '模板集分类1',
    parentId: '0',
  },
  {
    id: '2',
    categoryName: '模板集分类1',
    parentId: '1',
  },
]);

const renderFormTitle = (stateValue: 'add' | 'edit', data: ITemplateSet) => {
  if (stateValue === 'add') {
    return '模板集';
  } else {
    return data.setName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'setName',
    label: '模板集名称',
    width: 260,
  },
  {
    prop: 'setMemo',
    label: '模板集说明',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const params = ref({
  categoryId: '',
  keyword: '',
});
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/temp/template/set/#{id}',
  delInfoMsgEmphasize: '#{setName}',
};

const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/temp/template/set/list',
};

const getPageHttpConfig: IGetPageHttpConfig<ITemplateSet> = {
  url: '/admin-api/temp/template/set/page/list',
  query: () => {
    return { categoryId: params.value?.categoryId || '' };
  },
};

const getInfoHttpConfig: IGetInfoHttpConfig<ITemplateSet> = {
  url: '/admin-api/temp/template/set/#{id}',
};

const addInfoHttpConfig: IAddInfoHttpConfig<ITemplateSet> = {
  url: '/admin-api/temp/template/set',
};

const updateInfoHttpConfig: IUpdateInfoHttpConfig<ITemplateSet> = {
  url: '/admin-api/temp/template/set',
};
const loadData = (categoryId: string, categoryName: string) => {
  params.value.categoryId = categoryId;
  formData.value.categoryId = categoryId;
  formData.value.categoryName = categoryName;
  templateSetGridRef.value.loadData();
};

const treeProps = {
  label: 'fileName',
  children: 'children',
  value: 'id',
};
const addTemplateFile = () => {
  // const treeData = [{ id: nanoid(), children: [], fileName: '', type: 2, isEdit: true }];
  // formData.value.templateFileTree.push({ id: nanoid(), children: [], fileName: '', type: 2, isEdit: true });
  // fileTreeRef.value.setTreeData(treeData);
  console.log(111);
};

// watch(
//   () => formData.value.setName,
//   (newSetName: string) => {
//     const treeData = fileTreeRef.value.getTreeData();
//     if (treeData.length > 0) {
//       treeData[0].fileName = newSetName;
//       fileTreeRef.value.setTreeData(treeData);
//       // 执行相关逻辑
//     } else {
//       const treeData = [{ id: nanoid(), systemDefault: '1', children: [], fileName: newSetName, type: 2 }];
//       fileTreeRef.value.setTreeData(treeData);
//       // 执行相关逻辑
//     }
//   },
// );

const currentNodeChange = (nodeData: ITemplateFile) => {
  // alert(1);
  console.log(111);
};
const beforeSave = (formData: ITemplateSet, add: boolean): ITemplateSet => {
  const treeData = fileTreeRef.value.getTreeData();
  alert(JSON.stringify(treeData));
  return formData;
};
defineExpose({ loadData });
</script>
<style lang="scss" scoped>
:deep(.form) {
  height: 100%;
  padding: 0px;
  // overflow-y: hidden;
}
:deep(.dw-form-table) {
  border-top: 0px;
}
</style>
